<template>
  <div class="TenYearOf">
      <ShowBegin></ShowBegin>
      <div class="another">
        <div class="background" v-if="bkImagesList[0]!== undefined ">
          <img :src="bkImagesList[bkImgIndex].imgUrl" ref="bk" :class="bkMoveWay[bkMoveWay.length-1]">
        </div>
        <NavTenYear></NavTenYear>
        <div class="mask">
          <div class="fix-height-select"></div>
          <div class="TenYearOf-HomeSwiper">
            <div class="swiper-big" ref="getSpans">
              <div class="TenYearOf-HomeSwiper-text" ref="spans">
                <span v-for="(str,index) in handsWrite" :key="index">{{str}}</span>
              </div>
              <HomeSwiper></HomeSwiper>
            </div>
          </div>
          <div class="introduce">
            <div class="background">
              <div class="text">
                <div class="title" ref="introduceTitle">
                  <div class="first">十</div>
                  <div class="second">年生死</div>
                </div>
                <div class="passage">
                  人的一生，十年为一个轮回。<br>
                  在十年间的生死沉浮，即为十年生死。<br>
                  每个十年都有一个虚幻的梦，<br>梦开始于十年之始，结束于十年之终。<br>
                  只要是在梦中，无论何事何物，十年后就为一片虚无。<br>十年为梦，抉择为生死。能通过抉择突破梦的结界，来到下个十年的事物，我将其称之为铭刻。
                </div>
              </div>
              <div class="img" ref="introduceImg"></div>
            </div>
          </div>
          <div class="fourChoice">
            <div class="whichOne" ref="turnBlack">
                <div class="title">此刻，做出你的选择</div>
                <div class="SelectLabelf">
                  <SelectLabel v-for="index in 4" :key="index" @click.native="goOne(titleList[index-1])" :title="titleList[index-1]" :imgUrl="index" :passage="SelectLabelPassage[index-1]" ></SelectLabel>
                </div>
            </div>
          </div>
          <div class="magic">
            <div class="bk" ref="rushs">
              <div class="threeDMagic"><span>十年三国</span></div>
              <div class="rushs">
                  <div class="rush rush1">
                    <div class="rush1f f"><span>为</span></div>
                    <div class="rush1b b"><span ref="fix1">仅</span></div>
                  </div>
                  <div class="rush rush2">
                    <div class="rush2f f"><span>何</span></div>
                    <div class="rush2b b"><span ref="fix2">此</span></div>
                  </div>
                  <div class="rush rush3">
                    <div class="rush3f f"><span>如</span></div>
                    <div class="rush3b b"><span ref="fix3">而</span></div>
                  </div>
                  <div class="rush rush4">
                    <div class="rush4f f"><span>此</span></div>
                    <div class="rush4b b"><span ref="fix4">已</span></div>
                  </div>
              </div>
            </div>
          </div>
          <FooterTenYear></FooterTenYear>
        </div>
      </div>
  </div>
</template>

<script>
import ShowBegin from './ShowBegin'
import SelectLabel  from './SelectLabel'
import {mapState} from 'vuex'
import {rand,randPoint} from '@/utils'
import FooterTenYear from '../../components/FooterTenYear/index.vue'
import { nanoid } from 'nanoid'

export default {
    name:'TenYearOf',
    data() {
      return {
        scrool: 0,
        bkImgIndex:0,
        bkImagesList:[
            {
                "id": "1",
                "imgUrl": require('@/assets/tenYearOfHome/background-image1.jpg')
            },
            {
                "id": "2",
                "imgUrl": require('@/assets/tenYearOfHome/background-image2.jpg')
            },
            {
                "id": "3",
                "imgUrl": require('@/assets/tenYearOfHome/background-image3.jpg')
            },
            {
                "id": "4",
                "imgUrl": require('@/assets/tenYearOfHome/background-image4.jpg')
            }
        ],
        bkMoveWay:['kenburns-left','kenburns-right','kenburns-top-right'],
        handsWriteW:innerWidth,
        handsWriteH:innerHeight,
        time:null,  //幻灯片定时器
        //为了避免数据混乱，后期会放入数据库
        handsWrite:[
        '十字赞歌',
        '必须要明白的世界之语',
        '黑白的世界与空亡',
        '命运交响曲',
        '留恋之魂',
        '塑料世界',
        '复仇焰火与忠义之魂',
        '屏幕内的三重奏',
        '缱绻与缠怨',
        '留在坟墓中的话',
        '遗世',
        '梦幻之花的疾行',
        '黑白魔法使与乐园的巫女',
        '厌世',
        '笼中鸟的回归',
        '低语',
        '卑劣者的结局',
        '新的荣耀与不屈亡魂',
        '未完待续...',
        '世界的终焉与原点回归'],
        SelectLabelPassage:['论吾之十年，谁主沉浮',
        '在现实与虚妄之间，被最高的荣耀赐死',
        '空洞与亡语,命令自身的驱动器',
        '谢汝之爱，置于永恒'
        ],
        titleList:['十年','生死','抉择','铭刻']
      };
    },
    methods:{
      goOne(title){
        this.$router.push({
            name:'oneRoom',
            query:{title,fix:nanoid(5)},
        })
      }
    },
    mounted() {
      //获取滚动距离绑定nav为固定 introduce图片的滑动 文字上浮 turn black
      window.addEventListener('scroll', this.HomeScrool)
      //获取mock背景图并动态显示
      //由于mockjs与cropper发生冲突，取消背景轮播图mockjs获取，改为从服务器获取

      // this.$store.dispatch('BHome/reqBkImagesAction').then(()=>{
      // this.bkImagesList = this.$store.state.BHome.bkImagesList;
        let t = 0;
        this.time = setInterval(() => {
          this.$refs.bk.className = ''
          this.bkImgIndex++
          if(this.bkImgIndex === this.bkImagesList.length)this.bkImgIndex = 0;
          if(t === this.bkMoveWay.length) t = 0;
          this.$refs.bk.classList.add(`${this.bkMoveWay[t++]}`)
        }, 4990);
      // });


      //监视视口的变化以调整样式
      window.addEventListener('resize',this.HomeResize)
      //handsWrite文字样式
      let S = this.$refs.spans.children
      for(let i=0;i<S.length;i++){
         let newWidth = rand(0,this.handsWriteW);
         let newHeight = rand(0,this.handsWriteH - 20);
         S[i].style.left = newWidth + 'px';
         S[i].style.top = newHeight + 'px';
         S[i].style.transform = 'rotate('+`${randPoint(-0.05,0.05)}`+'turn)'
      }
      //翻转
      let flag = true;
      this.$refs.rushs.addEventListener('mouseover',()=>{
        if(flag){
          let arr = this.$refs.rushs.querySelectorAll('.rush');
          arr[0].classList.add('swing-top-left-fwd');
          arr[1].classList.add('swing-top-right-fwd');
          arr[2].classList.add('swing-bottom-left-fwd');
          arr[3].classList.add('swing-bottom-right-fwd');
          let time = setTimeout(()=>{
            let t = this.$refs.rushs.querySelector('.threeDMagic');
            t.classList.add('threeDMagicToBig');
            clearTimeout(time);
            flag = false;
          },400)
        }
      })
      this.$refs.rushs.addEventListener('mouseleave',()=>{
        if(!flag){
          let arr = this.$refs.rushs.querySelectorAll('.rush');
          let t = this.$refs.rushs.querySelector('.threeDMagic');
          t.classList.remove('threeDMagicToBig');
          let time = setTimeout(()=>{
            arr[0].classList.remove('swing-top-left-fwd');
            arr[0].classList.add('return1');
            arr[1].classList.remove('swing-top-right-fwd');
            arr[1].classList.add('return2');
            arr[2].classList.remove('swing-bottom-left-fwd');
            arr[2].classList.add('return3');
            arr[3].classList.remove('swing-bottom-right-fwd');
            arr[3].classList.add('return4');
            clearTimeout(time);
            flag = true;
          },400)
        }

      })
    },
    watch: {
      handsWriteW(newValue, oldValue) {
        let S = this.$refs.spans.children
        for(let i=0;i<S.length;i++){
          S[i].style.left = S[i].style.left*(newValue/oldValue) + 'px';
        }
      },
      handsWriteH(newValue, oldValue) {
        let S = this.$refs.spans.children
        for(let i=0;i<S.length;i++){
          S[i].style.top = S[i].style.top*(newValue/oldValue) + 'px';
        }
      },
    },
    computed: {
      HomeScrool() {
        return ()=>{
          this.scrool = window.pageYOffset
          if(this.scrool >= 1.75 * this.handsWriteH){
            this.$refs.introduceImg.classList.add('imgmove')
            this.$refs.introduceTitle.classList.add('slide-top')
          }else{
            this.$refs.introduceImg.classList.remove('imgmove')
            this.$refs.introduceTitle.classList.remove('slide-top')
          }
          if(document.querySelector('.show-begin').offsetHeight <=this.scrool){
            document.querySelector('.container-nav').classList.add('nav')
            document.querySelector('.fix-height-select').classList.add('fix-height')
          }else{
            document.querySelector('.container-nav').classList.remove('nav')
            document.querySelector('.fix-height-select').classList.remove('fix-height')

          }
          
          if(this.scrool <1.75 * this.handsWriteH){
            this.$refs.turnBlack.classList.remove('turnBlack')
          }else if(this.scrool >= 1.75 * this.handsWriteH && this.scrool < 2.5 * this.handsWriteH){
            this.$refs.turnBlack.classList.remove('fixedBlack')
          }else if(this.scrool >= 2.5 * this.handsWriteH && this.scrool <= 3 * this.handsWriteH){
            let per = Math.floor(((this.scrool - 2.5 * this.handsWriteH)/(0.5*this.handsWriteH) )* 100)
            if(this.scrool == 2.5 * this.handsWriteH) per = 0;
            this.$refs.turnBlack.classList.add('turnBlack')
            this.$refs.turnBlack.style.filter = 'opacity('+ `${per}` +'%)'
          }else if(this.scrool > 3 * this.handsWriteH){
            this.$refs.turnBlack.style.filter = 'opacity(100%)'
            this.$refs.turnBlack.classList.remove('turnBlack')
            this.$refs.turnBlack.classList.add('fixedBlack')
          }
        }
      },
      HomeResize(){
        return ()=>{
          this.handsWriteW = window.innerWidth
          this.handsWriteH = window.innerHeight
        }
      }
    },
    beforeDestroy(){
      window.removeEventListener('scroll',this.HomeScrool);
      window.removeEventListener('resize',this.HomeResize);
      clearInterval(this.time);
    },
    components:{
    ShowBegin,
    SelectLabel,
    FooterTenYear,
},
}
</script>

<style lang="less" scoped>
.TenYearOf{
  .kenburns-left {
    -webkit-animation: kenburns-left 5s ease-out both;
            animation: kenburns-left 5s ease-out both;
  }
  @-webkit-keyframes kenburns-left {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 16% 50%;
              transform-origin: 16% 50%;
    }
    100% {
      -webkit-transform: scale(1.25) translate(-20px, 15px);
              transform: scale(1.25) translate(-20px, 15px);
      -webkit-transform-origin: left;
              transform-origin: left;
    }
  }
  @keyframes kenburns-left {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 16% 50%;
              transform-origin: 16% 50%;
    }
    100% {
      -webkit-transform: scale(1.25) translate(-20px, 15px);
              transform: scale(1.25) translate(-20px, 15px);
      -webkit-transform-origin: left;
              transform-origin: left;
    }
    }
  .kenburns-right {
    -webkit-animation: kenburns-right 5s ease-out both;
            animation: kenburns-right 5s ease-out both;
  }
  @-webkit-keyframes kenburns-right {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 84% 50%;
              transform-origin: 84% 50%;
    }
    100% {
      -webkit-transform: scale(1.25) translateX(20px);
              transform: scale(1.25) translateX(20px);
      -webkit-transform-origin: right;
              transform-origin: right;
    }
  }
  @keyframes kenburns-right {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 84% 50%;
              transform-origin: 84% 50%;
    }
    100% {
      -webkit-transform: scale(1.25) translateX(20px);
              transform: scale(1.25) translateX(20px);
      -webkit-transform-origin: right;
              transform-origin: right;
    }
  }
  .kenburns-top-right {
    -webkit-animation: kenburns-top-right 5s ease-out both;
            animation: kenburns-top-right 5s ease-out both;
  }

  @-webkit-keyframes kenburns-top-right {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 84% 16%;
              transform-origin: 84% 16%;
    }
    100% {
      -webkit-transform: scale(1.25) translate(20px, -15px);
              transform: scale(1.25) translate(20px, -15px);
      -webkit-transform-origin: right top;
              transform-origin: right top;
    }
  }
  @keyframes kenburns-top-right {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 84% 16%;
              transform-origin: 84% 16%;
    }
    100% {
      -webkit-transform: scale(1.25) translate(20px, -15px);
              transform: scale(1.25) translate(20px, -15px);
      -webkit-transform-origin: right top;
              transform-origin: right top;
    }
  }
  .kenburns-bottom-left {
    -webkit-animation: kenburns-bottom-left 5s ease-out both;
            animation: kenburns-bottom-left 5s ease-out both;
  }
  @-webkit-keyframes kenburns-bottom-left {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 16% 84%;
              transform-origin: 16% 84%;
    }
    100% {
      -webkit-transform: scale(1.25) translate(-20px, 15px);
              transform: scale(1.25) translate(-20px, 15px);
      -webkit-transform-origin: left bottom;
              transform-origin: left bottom;
    }
  }
  @keyframes kenburns-bottom-left {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 16% 84%;
              transform-origin: 16% 84%;
    }
    100% {
      -webkit-transform: scale(1.25) translate(-20px, 15px);
              transform: scale(1.25) translate(-20px, 15px);
      -webkit-transform-origin: left bottom;
              transform-origin: left bottom;
    }
  }



  .another{
    position: relative;
 
    &>.background{
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: fixed;
      left: 0px;
      top: 60px;
      z-index: -999;
      &>img{
        width: 100%;
        height: 100%;
      }
    }
    &>.nav{
      position: fixed;
      top:0px
    }
    .fix-height{
      height: 60px;
    }
  }
  .mask{
    background-color:rgba(255, 255, 255, .5);
    height: auto;
    width: 100%;
    position: relative;
    z-index: 9;
    .TenYearOf-HomeSwiper{
    .swiper-big{
      position: relative;
      overflow: hidden;
        .TenYearOf-HomeSwiper-text{
          &>span{
            position: absolute;
            font-size: 30px;
            display: inline-block;
            user-select: none;
          }
        }
      }
    }
    
    .introduce{
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content:center;
      align-items: center;
      .background{
        width: 70vw;
        height: 60vh;
        background-color:rgba(255, 255, 255, .4) ;
        backdrop-filter:blur(50px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        box-shadow: 0 0 15px rgb(95 95 95 / 50%);
        .img{
          height: 80vh;
          width: 40%;
          background-image: url(./image/introduce.jpg);
          background-size: cover;
          border-radius:2em ;
          position: absolute;
          left: 0px;
          transition: transform 1s ease-out;
        }
        .imgmove{
          transform: translate(49vw,0);
        }
        .text{
          width: 60%;
          height: 80%;
          font-size: 25px;
          position: relative;
          .title{
            user-select: none;
            transform: translateY(60vh);
            .first{
              font-size: 100px;
              user-select: none;
              position: absolute;
              top: -60px;
              left: -6%;
            }
            .second{
              font-size: 60px;
              position: absolute;
              left: 6%;
            }
          }
          .passage{
            line-height:50px;
            user-select: none;
          }
          .slide-top {
            -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                    animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          }
          @-webkit-keyframes slide-top {
            0% {
              -webkit-transform: translateY(40vh);
                      transform: translateY(40vh);
            }
            100% {
              -webkit-transform: translateY(-10vh);
                      transform: translateY(-10vh);
            }
          }
          @keyframes slide-top {
            0% {
              -webkit-transform: translateY(40vh);
                      transform: translateY(40vh);
            }
            100% {
              -webkit-transform: translateY(-10vh);
                      transform: translateY(-10vh);
            }
          }

        }
      }
    }

    .fourChoice{
      width: 100vw;
      height: 100vh;
      .whichOne{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .title{
          color: white;
          font-size: 60px;
          margin-bottom:10vh ;
        }
        .SelectLabelf{
          display: flex;
          flex-direction: row;
          .SelectLabel {
            cursor: pointer;
            margin-left:1vw ;
            margin-right:1vw ;
            position: relative;
            top: 30px;
          }
        }

      }
      .turnBlack{
          width: 100%;
          height: 100%;
          position: fixed;
          top: 60px;
          background-color: black;
          filter: opacity(0%)
      }
      .fixedBlack{
          width: 100%;
          height: 100%;
          background-color: black;
      }
    }
    .magic{
      height:100vh;
      width:100vw;
      background-color: rgba(245, 222, 1791,.5);
      border-radius:2em ;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top:20px ;
      .bk{
          .rushs{
            width: 20vw;
            height: 20vw;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            z-index: 9;
            .rush1{
              background: url(./image/640.jpg);
              background-position:0% 0%;
            }
            .rush2{
              background: url(./image/640.jpg);
              background-position:100% 0%;

            }
            .rush3{
              background: url(./image/640.jpg);
              background-position:0% 100%;

            }
            .rush4{
              background: url(./image/640.jpg);
              background-position:100% 100%;
            }
            .rush{
              height:50%;
              width:50%;
              position: relative;
              transform-style: preserve-3d;
              transition: all .5s;
              background-repeat:no-repeat ;
              &>div{
                position: absolute;
                top: 0px;
                width: 100%;
                height: 100%;
                font-size: 40px;
                backface-visibility: hidden;
                text-align: center;
                display:flex ;
                justify-content: center;
                align-items: center;
                &>span{
                  display:inline-block;
                }
              }
              &>.f{
                z-index: 1;
                color: white;
              }
              &>.b{
                transform: rotateY(180deg);
                color: white;
              }
              &>.rush1b{
                background: url(./image/img3.jpg);
                &>span{
                transform:rotateZ(-90deg)
                }
              }
              &>.rush2b{
                background: url(./image/img3.jpg);
                &>span{
                transform:rotateZ(90deg)
                }
              }
              &>.rush3b{
                background: url(./image/img3.jpg);
                &>span{
                transform:rotateZ(90deg)
                }
              }
              &>.rush4b{
                background: url(./image/img3.jpg);
                &>span{
                transform:rotateZ(-90deg)
                }
              }
            }
            .return1{
              -webkit-animation:return1 0.4s ease-out;
              animation: return1 0.4s ease-out;
            }
            @keyframes return1 {
              from{
                transform: translate(-10vw,-10vw);
              }
              to{
                transform: translate(0,0);
              }
            }
            @-webkit-keyframes return1 {
              from{
                transform: translate(-10vw,-10vw);
              }
              to{
                transform: translate(0,0);
              }
            }
            .return2{
              -webkit-animation:return2 0.4s ease-out;
              animation: return2 0.4s ease-out;
            }
            @keyframes return2 {
              from{
                transform: translate(10vw,-10vw);
              }
              to{
                transform: translate(0,0);
              }
            }
            @-webkit-keyframes return2 {
              from{
                transform: translate(10vw,-10vw);
              }
              to{
                transform: translate(0,0);
              }
            }
            .return3{
              -webkit-animation:return3 0.4s ease-out;
              animation: return3 0.4s ease-out;
            }
            @keyframes return3 {
              from{
                transform: translate(-10vw,10vw);
              }
              to{
                transform: translate(0,0);
              }
            }
            @-webkit-keyframes return3 {
              from{
                transform: translate(10vw,-10vw);
              }
              to{
                transform: translate(0,0);
              }
            }
            .return4{
              -webkit-animation:return4 0.4s ease-out;
              animation: return4 0.4s ease-out;
            }
            @keyframes return4 {
              from{
                transform: translate(10vw,10vw);
              }
              to{
                transform: translate(0,0);
              }
            }
            @-webkit-keyframes return4 {
              from{
                transform: translate(10vw,10vw);
              }
              to{
                transform: translate(0,0);
              }
            }
            //1
            .swing-top-left-fwd {
              -webkit-animation: swing-top-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
              animation: swing-top-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            }
            @-webkit-keyframes swing-top-left-fwd {
              0% {
                -webkit-transform: rotate3d(-1, 1, 0, 0deg);
                        transform: rotate3d(-1, 1, 0, 0deg);
                -webkit-transform-origin: 0% 0%;
                        transform-origin: 0% 0%;
              }
              100% {
                -webkit-transform: rotate3d(-1, 1, 0, -180deg);
                        transform: rotate3d(-1, 1, 0, -180deg);
                -webkit-transform-origin: 0% 0%;
                        transform-origin: 0% 0%;
              }
            }
            @keyframes swing-top-left-fwd {
              0% {
                -webkit-transform: rotate3d(-1, 1, 0, 0deg);
                        transform: rotate3d(-1, 1, 0, 0deg);
                -webkit-transform-origin: 0% 0%;
                        transform-origin: 0% 0%;
              }
              100% {
                -webkit-transform: rotate3d(-1, 1, 0, -180deg);
                        transform: rotate3d(-1, 1, 0, -180deg);
                -webkit-transform-origin: 0% 0%;
                        transform-origin: 0% 0%;
              }
            }
            //2
            .swing-top-right-fwd {
              -webkit-animation: swing-top-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                      animation: swing-top-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            }
            @-webkit-keyframes swing-top-right-fwd {
      0% {
        -webkit-transform: rotate3d(1, 1, 0, 0deg);
                transform: rotate3d(1, 1, 0, 0deg);
        -webkit-transform-origin: 100% 0%;
                transform-origin: 100% 0%;
      }
      100% {
        -webkit-transform: rotate3d(1, 1, 0, 180deg);
                transform: rotate3d(1, 1, 0, 180deg);
        -webkit-transform-origin: 100% 0%;
                transform-origin: 100% 0%;
      }
            }
            @keyframes swing-top-right-fwd {
              0% {
                -webkit-transform: rotate3d(1, 1, 0, 0deg);
                        transform: rotate3d(1, 1, 0, 0deg);
                -webkit-transform-origin: 100% 0%;
                        transform-origin: 100% 0%;
              }
              100% {
                -webkit-transform: rotate3d(1, 1, 0, 180deg);
                        transform: rotate3d(1, 1, 0, 180deg);
                -webkit-transform-origin: 100% 0%;
                        transform-origin: 100% 0%;
              }
            }
            //3
            .swing-bottom-left-fwd {
              -webkit-animation: swing-bottom-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
              animation: swing-bottom-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            }
            @-webkit-keyframes swing-bottom-left-fwd {
              0% {
                -webkit-transform: rotate3d(1, 1, 0, 0deg);
                        transform: rotate3d(1, 1, 0, 0deg);
                -webkit-transform-origin: 0% 100%;
                        transform-origin: 0% 100%;
              }
              100% {
                -webkit-transform: rotate3d(1, 1, 0, -180deg);
                        transform: rotate3d(1, 1, 0, -180deg);
                -webkit-transform-origin: 0% 100%;
                        transform-origin: 0% 100%;
              }
            }
            @keyframes swing-bottom-left-fwd {
              0% {
                -webkit-transform: rotate3d(1, 1, 0, 0deg);
                        transform: rotate3d(1, 1, 0, 0deg);
                -webkit-transform-origin: 0% 100%;
                        transform-origin: 0% 100%;
              }
              100% {
                -webkit-transform: rotate3d(1, 1, 0, -180deg);
                        transform: rotate3d(1, 1, 0, -180deg);
                -webkit-transform-origin: 0% 100%;
                        transform-origin: 0% 100%;
              }
            }
            //4
            .swing-bottom-right-fwd {
      -webkit-animation: swing-bottom-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
              animation: swing-bottom-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            }
            @-webkit-keyframes swing-bottom-right-fwd {
      0% {
        -webkit-transform: rotate3d(-1, 1, 0, 0deg);
                transform: rotate3d(-1, 1, 0, 0deg);
        -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
      }
      100% {
        -webkit-transform: rotate3d(-1, 1, 0, 180deg);
                transform: rotate3d(-1, 1, 0, 180deg);
        -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
      }
            }
            @keyframes swing-bottom-right-fwd {
              0% {
                -webkit-transform: rotate3d(-1, 1, 0, 0deg);
                        transform: rotate3d(-1, 1, 0, 0deg);
                -webkit-transform-origin: 100% 100%;
                        transform-origin: 100% 100%;
              }
              100% {
                -webkit-transform: rotate3d(-1, 1, 0, 180deg);
                        transform: rotate3d(-1, 1, 0, 180deg);
                -webkit-transform-origin: 100% 100%;
                        transform-origin: 100% 100%;
              }
            }

          }
          .threeDMagic{
            width: 40vw;
            height: 20vw;
            background: url(./image/img.png);
            background-size:cover ;
            font-size: 60px;
            color: blue;
            text-align: center;
            user-select: none;
            line-height: 20vw;
            position: absolute;
            left: 30vw;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            transform: scale(0.5,0.5);
            transition: transform 0.4s ease-out;
            span{
              color:white;
              cursor: pointer;
            }
          }
          .threeDMagicToBig{
            transform: scale(2,2);
          }
        }
    }
    .footer{
      margin-top:20px ;
    }
  }
}
</style>